<form nz-form [formGroup]="addForm" (ngSubmit)="onAction($event)">
    <div nz-row [nzGutter]="24">
        <div nz-col [nzSpan]="12">
            <nz-form-item>
                @if (editMode == modeEnum.ADD) {
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="username" nzRequired="">用户名称</nz-form-label>
                } @else {
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="username">用户名称</nz-form-label>
                }
                <nz-form-control [nzSm]="14" [nzXs]="24">
                    <input nz-input formControlName="username" placeholder="用户名称" />
                    @if (editMode == modeEnum.ADD) {
                    <div *ngIf="submitted && fm['username'].invalid" class="alert">
                        <div *ngIf="fm['username'].errors?.['rquired']">用户名不能为空</div>
                        <div *ngIf="fm['username'].errors?.['minlength']">用户名长度不小于2</div>
                        <div *ngIf="fm['username'].errors?.['maxlength']">用户名长度不超过20</div>
                    </div>
                    }
                </nz-form-control>
            </nz-form-item>
        </div>
        <div nz-col [nzSpan]="12">
            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="password" nzRequired="">用户密码</nz-form-label>
        
                <nz-form-control [nzSm]="14" [nzXs]="24">
                    <input [type]="passwordVisible ? 'text' : 'password'" nz-input formControlName="password"
                        placeholder="用户密码" />
                    <div *ngIf="submitted && fm['password'].invalid" class="alert">
                        <div *ngIf="fm['password'].errors?.['rquired']">密码不能为空</div>
                        <div *ngIf="fm['password'].errors?.['minlength']">密码长度不小于6</div>
                        <div *ngIf="fm['password'].errors?.['maxlength']">密码长度不超过20</div>
                    </div>
                </nz-form-control>
                
            </nz-form-item>
        </div>
    </div>

    <div nz-row [nzGutter]="24">
        <div nz-col [nzSpan]="12">
            <nz-form-item>
                @if (editMode == modeEnum.ADD) {
                    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="nickName" nzRequired="true">用户昵称</nz-form-label>
                } @else {
                    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="nickName">用户昵称</nz-form-label>
                }
                <nz-form-control [nzSm]="14" [nzXs]="24">
                    <input nz-input formControlName="nickName" placeholder="用户昵称" id="nickName" />
                </nz-form-control>
            </nz-form-item>
        </div>
        <div nz-col [nzSpan]="12">
            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="deptId">归属部门</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24">
                    <nz-tree-select style="width: 250px;" [nzExpandedKeys]="expandKeys" [nzNodes]="deptNodes"
                        [(ngModel)]="selectedNode" [ngModelOptions]="{standalone: true}" nzPlaceHolder="Please select"
                        (ngModelChange)="onChange($event)">
                    </nz-tree-select>
                </nz-form-control>
            </nz-form-item>
        </div>
    </div>

    <div nz-row [nzGutter]="24">
        <div nz-col [nzSpan]="12">
            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="phoneNumber">电话号码</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24">
                    <input nz-input formControlName="phoneNumber" placeholder="电话号码" />
                </nz-form-control>
            </nz-form-item>
        </div>
        <div nz-col [nzSpan]="12">
            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="email">电子邮箱</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24">
                    <input nz-input formControlName="email" placeholder="电子邮箱" id="email" />
                </nz-form-control>
            </nz-form-item>
        </div>
    </div>

    <div nz-row [nzGutter]="24">
        <div nz-col [nzSpan]="12">
            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="sex">性别</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24">
                    <nz-select class="user-sex" name="sex" formControlName="sex">
                        <nz-option *ngFor="let sex of sexes" [nzValue]="sex.key" [nzLabel]="sex.display"></nz-option>
                    </nz-select>
                </nz-form-control>
            </nz-form-item>
        </div>
        <div nz-col [nzSpan]="12">
            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="enabled">状态</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24">
                    <nz-select class="user-enabled" name="enabled" [(ngModel)]="selectedEnabled"
                        [ngModelOptions]="{standalone: true}" [nzAllowClear]="true">
                        <nz-option [nzValue]="true" nzLabel="正常"></nz-option>
                        <nz-option [nzValue]="false" nzLabel="停用"></nz-option>
                    </nz-select>
                </nz-form-control>
            </nz-form-item>
        </div>
    </div>

    <div nz-row [nzGutter]="24">
        <div nz-col [nzSpan]="12">
            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="post">岗位</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24">
                    <nz-select name="post" formControlName="post">
                        <nz-option *ngFor="let post of posts" [nzValue]="post.postId" [nzLabel]="post.postName">
                        </nz-option>
                    </nz-select>
                </nz-form-control>
            </nz-form-item>
        </div>
        <div nz-col [nzSpan]="12">
            <div nz-row [nzGutter]="24" style="margin-bottom: 24px;">
                <div nz-col [nzSpan]="6" style="text-align: right; line-height: 1.57; justify-content: center;">
                    <span style="align-content: center;">角色:</span>
                </div>
                <div nz-col [nzSpan]="14">
                    <nz-select style="width: 80%;" [nzMaxTagCount]="3" nzMode="multiple" nzPlaceHolder="请选择角色" 
                    [(ngModel)]="selectedRoleIds" [ngModelOptions]="{standalone: true}">
                        <nz-option *ngFor="let role of roles" [nzLabel]="role.roleName" [nzValue]="role.roleId" >
                        </nz-option>
                    </nz-select>
                </div>
            </div>
            


            
        </div>
    </div>

    <div nz-row [nzGutter]="24">
        <div nz-col [nzSpan]="12">
            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="joinTime">入职时间</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24">
                    <nz-date-picker formControlName="joinTime"></nz-date-picker>
                </nz-form-control>
            </nz-form-item>
        </div>
        <div nz-col [nzSpan]="12">
            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="birthday">生日</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24">
                    <nz-date-picker formControlName="birthday"></nz-date-picker>
                </nz-form-control>
            </nz-form-item>
        </div>
    </div>

    <div nz-row [nzGutter]="24">
        <div nz-col [nzSpan]="24">

            <nz-form-item>
                <nz-form-label [nzSm]="3" [nzXs]="24" nzFor="remark">备注</nz-form-label>
                <nz-form-control [nzSm]="19" [nzXs]="24">
                    <textarea rows="4" nz-input formControlName="remark"></textarea>
                </nz-form-control>
            </nz-form-item>
        </div>
    </div>

    <div nz-row nzJustify="end">
        <div nz-col>
            @if (editMode == modeEnum.ADD) {
            <button nz-button class="dialog-button" [nzType]="'primary'">添加</button>
            } @else {
            <button nz-button class="dialog-button" [nzType]="'primary'">修改</button>
            }
            <button nz-button class="dialog-button" (click)="onCancel($event)">取消</button>
        </div>
    </div>

</form>